<template>
    <el-button type="primary" @click="insert">插入dom</el-button>
    <div ref="container" id="slot-com">

    </div>
</template>

<script>
export default {
    name: "SlotCom"
}
</script>
// usage
<script setup>
import { ref, onUnmounted, getCurrentInstance,onMounted } from 'vue'
import renderComponent from '@/utils/renderComponent'

const { appContext } = getCurrentInstance()
console.log(appContext,'==appContext')
const container = ref(null)
let counter = 1
let destroyComp = null
let ele = null
onUnmounted(() => destroyComp?.())
const insert = async () => {
    destroyComp?.()
    destroyComp = renderComponent({
        // el: container.value, //  组件要插入的那个dom
        el: ele, //  组件要插入的那个dom
        component: (await import('@/views/MySelect.vue')).default, // 要插入的组件
        props: { // 传入 props
            key: counter,
            msg: 'Message ' + counter++,
            test: [{name: 'testpropsaaa'}]
        },
        appContext, // 获取组件实例的
    })
}

onMounted(() => {
    ele = document.getElementById('slot-com')
    console.log(ele)
})
</script>
<style scoped>

</style>